<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在线留言</title>
    <link rel="stylesheet" href="../css/onlineMessage.css" />
  </head>

  <body>
    <!-- 顶部 第一部分 -->
    <header>
      <nav>
        <div class="nav">
          <div class="left">
            <img
              width="100%"
              height="100%"
              src="https://oss.lcweb01.cn/joomla/20220620/a9d1432be53c65ccb7965f1c7936546f.png"
              alt=""
            />
          </div>
          <div class="center">
            <ul style="display: flex; justify-content: space-between">
              <li><a href="">首页</a></li>
              <li><a href="">公司简介</a></li>
              <li><a href="">客户案例</a></li>
              <li><a href="">产品展示</a></li>
              <li><a href="">新闻中心</a></li>
              <li><a href="">人才招聘</a></li>
              <li><a href="">在线留言</a></li>
              <li><a href="">联系我们</a></li>
              <i class="line" style="display: none; width: 100px; left: 0"></i>
            </ul>
          </div>
          <div class="right">
            <img src="../resources/image/三条杠.png" alt="" />
          </div>
        </div>
      </nav>
      <div class="newCenter">
        <h1>-&nbsp;在线留言&nbsp;-</h1>
        <p>Talent&nbsp;Recruiment</p>
      </div>
    </header>

    <!-- 第二部分 -->
    <section>
      <div class="center">
        <ul>
          <li>
            <label for="">姓名</label>
            <br />
            <input type="text" placeholder="姓名" />
          </li>
          <li>
            <label for="">年龄</label>
            <br />
            <input type="text" placeholder="年龄" />
          </li>
          <li>
            <label for="">邮箱*</label>
            <br />
            <input
              placeholder="邮箱"
              type="email"
              required
              pattern="\S.*"
              title="输入框不能为空"
            />
          </li>
          <li>
            <label for="">主题</label>
            <br />
            <input type="text" placeholder="主题" />
          </li>
          <li style="height: 200px">
            <label for="">信息*</label>
            <br />
            <textarea
              placeholder="信息"
              style="width: 101%; height: 150px; margin-top: 10px; resize: none"
            ></textarea>
          </li>
          <li>
            <label for="">3 + 4 = ?</label>
            <br />
            <input type="text" placeholder="3 + 4 = ?" />
          </li>
        </ul>
        <button>提交</button>
      </div>
    </section>
    <!-- 底部 第三部分 -->
    <footer>
      <main>
        <div class="bottom-nav1">
          <div class="left">
            <img
              width="150px"
              height="60px"
              src="https://oss.lcweb01.cn/joomla/20220620/a9d1432be53c65ccb7965f1c7936546f.png"
              alt=""
            />
          </div>
          <div class="right">
            <ul style="display: flex; justify-content: space-between">
              <li><a style="color: white" href="">首页</a></li>
              <li><a style="color: white" href="">公司简介</a></li>
              <li><a style="color: white" href="">客户案例</a></li>
              <li><a style="color: white" href="">产品展示</a></li>
              <li><a style="color: white" href="">新闻中心</a></li>
              <li><a style="color: white" href="">人才招聘</a></li>
              <li><a style="color: white" href="">在线留言</a></li>
              <li><a style="color: white" href="">联系我们</a></li>
            </ul>
          </div>
        </div>
        <div class="bottom-nav2">
          <ul>
            <li>
              <i
                style="
                  width: 60px;
                  height: 60px;
                  background: url(https://oss.lcweb01.cn/joomla/20220627/09ab1c948da5f11b77e50e9435d62db2.png)
                    no-repeat;
                  background-size: cover;
                "
              ></i>
              <div>
                <p style="padding-top: 5px">咨询电话</p>
                <h3>0412-8051680、8051690</h3>
              </div>
            </li>
            <li>
              <i
                style="
                  width: 60px;
                  height: 60px;
                  background: url(https://oss.lcweb01.cn/joomla/20220627/023ee23f75b958eae694bf64a5ec47a6.png)
                    no-repeat;
                  background-size: cover;
                "
              ></i>
              <div>
                <p style="padding-top: 5px">公司地址</p>
                <h3>辽宁省鞍山市铁西区钢西路132号</h3>
              </div>
            </li>
            <li>
              <i
                style="
                  width: 60px;
                  height: 60px;
                  background: url(https://oss.lcweb01.cn/joomla/20220627/c302cec4622d8bfb4fb6c2108b8b07e6.png)
                    no-repeat;
                  background-size: cover;
                "
              ></i>
              <div>
                <p style="padding-top: 5px">电子邮箱</p>
                <h3>hyhxg@163.com</h3>
              </div>
            </li>
            <li>
              <i
                style="
                  background: url(https://oss.lcweb01.cn/jzt/ff2657e1-6c9c-47ab-a3e5-9250a1ea5523/image/20220707/8f094beb8f027a69ef9d6a75f23aadce.png)
                    no-repeat;
                  background-size: cover;
                "
              ></i>
              <p style="padding-top: 5px; text-align: center">扫一扫</p>
            </li>
          </ul>
        </div>
      </main>
      <div class="bottom-text">
        <p>
          版权所有 &nbsp;鞍山阳天冶金能源技术有限公司&nbsp;&nbsp;
          <a href="#" target="_blank">辽ICP备18012886号-2</a>&nbsp;
          <a href="#" target="_blank">营业执照</a>&nbsp;&nbsp;
          <a href="#" target="_blank">技术支持：鞍山龙采</a>
        </p>
        <p>网站部分资源来自互联网公开渠道 如有侵权请及时联系本司删除</p>
      </div>
    </footer>

    <!--  移动端显示的 -->
    <div class="mobile-nav">
      <ul>
        <li>
          <a href="">
            <img
              width="26"
              height="26px"
              src="https://oss.lcweb01.cn/joomla/20210522/c14e2e8ed512cc6f52bd3e71e981ac07.png"
              alt=""
            />
            <p style="color: white">首页</p>
          </a>
        </li>
        <li>
          <a href="">
            <img
              width="26"
              height="26px"
              src="https://oss.lcweb01.cn/joomla/20210522/0766490a26bd7b99b77b4d5f7eaaa590.png"
              alt=""
            />
            <p style="color: white">电话</p>
          </a>
        </li>
        <li>
          <a href="">
            <img
              width="26"
              height="26px"
              src="https://oss.lcweb01.cn/joomla/20210522/f3fffe51c1777cd44598e9097261569a.png"
              alt=""
            />
            <p style="color: white">短信</p>
          </a>
        </li>
        <li>
          <a href="">
            <img
              width="26"
              height="26px"
              src="https://oss.lcweb01.cn/joomla/20210522/71259ca4027d1cf7458dcb0db69b1871.png"
              alt=""
            />
            <p style="color: white">产品</p>
          </a>
        </li>
      </ul>
    </div>

    <!-- 侧方top -->
    <a class="right-float" href="#top">
      <svg
        t="1724466221426"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="10404"
        width="32"
        height="32"
      >
        <path
          d="M209.922057 592.317257l38.498826 39.621393 277.219789-285.306978 277.223882 285.306978 38.497802-39.621393L525.640672 267.394003 209.922057 592.317257zM209.922057 592.317257"
          fill="#e6e6e6"
          p-id="10405"
        ></path>
      </svg>
    </a>

    <script>
      //导航的定位，
      //当鼠标滚动，让nav变为固定定位 ，然后背景色变为灰色透明
      var nav = document.querySelector("nav");
      // console.log(nav);
      var top1 = document.querySelector(".right-float");
      // console.log(top);

      window.addEventListener("scroll", function () {
        if (scrollY > 20) {
          nav.style.position = "fixed";
          nav.style.backgroundColor = "rgb(28, 27, 27, 0.6)";
          nav.style.top = "0px";
          top1.style.display = "block";
        } else {
          nav.style.position = "";
          nav.style.backgroundColor = "";
          nav.style.top = "";
          top1.style.display = "none";
        }
      });

      //导航的移入事件
      var lis = document.querySelectorAll(".nav>.center>ul>li");
      // console.log(lis);
      var line = document.querySelector(".line");
      // console.log(line);

      lis.forEach(function (item, index) {
        item.addEventListener("mouseenter", function () {
          // 显示 .line 元素
          line.style.display = "block";
          // 计算并设置 .line 元素的 left 值
          var left = 100 * index; // 假设每个 li 元素的宽度是 90px
          line.style.left = left + "px";
        });
        item.addEventListener("mouseleave", function () {
          line.style.display = "none";
        });
      });
    </script>
  </body>
</html>
